<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">
/* 选择第一个元素是p 的元素，所以 “这是div 中的”会被选中 */
 p:first-child{
     color: red
 }
 /* 选择最后一个元素是p 的元素，所以 "这是div 中的" 和"这是最后的p“都会被选中 */
 p:last-child{
     color: yellow
 }
 /* :nth-child(n) 选择第 n 个 元素是p 的元素，下标从 1开始，所以"这是第二个p"被选中 
    其中 n 还可以是 even 偶数 或者是 odd 奇数*/
 p:nth-child(2){
     color: blue
 }
 p:nth-child(even){
     color: pink
 }
 /* ：first-of-type 在当前类型的子元素中搜索 p元素中 定位第一个*/
 p:first-of-type{
     background-color: red
 }
  /* ：first-of-type 在当前类型的子元素中搜索 p元素中 定位最后一个*/
 p:last-of-type{
     background-color: yellow
 }
 /* :first(last)-child  是在所有的子类中查找
    :first(last)-of-type 在当前类型的子元素搜索 
  */
</style>
<body>
    <span>这是第一个span</span>
    <p>这是第一个p</p>
    <p>这是第二个p</p>
    <p>这是第三个p</p>
    <div>
        <p>这是div 中的</p>
    </div>
    <p>这是最后的p</p>
</body>
</html>